<template>
  <div class="tree-node-item">
    <span @click.stop="expand">
      <Arrow
        :class="
          `tree-node-item_icon inline-flex both-center ${
            item.expanded ? 'expanded' : 'collapsed'
          }`
        "
        v-show="item.isParent"
      />
    </span>

    <span class="tree-node-item_content" v-if="!$slots.default">
      <span class="key">【key:{{ item.key() }}】</span>
      <span class="label">点击次数：{{ item.label() }}</span>
      <span class="btn" @click.stop="handleClickItem">click</span>
    </span>
    <slot v-else node="node" />
    <div class="tree-node-item_children">
      <slide-up-down :active="item.expanded">
        <tree-node-item
          v-bind="$attrs"
          v-on="$listeners"
          v-for="child in item.childNodes"
          :key="child.id"
          :item="child"
        />
      </slide-up-down>
    </div>
  </div>
</template>
<script>
import SlideUpDown from "./state/slider-up-down";
import Arrow from "./icon/Arrow";
// import Bus from "./state/bus";
export default {
  componentName: "TreeNodeItem",
  name: "TreeNodeItem",
  components: { Arrow, SlideUpDown },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return { tree: null };
  },
  methods: {
    handleClickItem() {
      this.item.data.clickCount++;
      this.$emit("node-item-click", this.item);
    },
    expand() {
      if (!this.item.isParent) return;
      this.item.expanded = !this.item.expanded;
    },
    handleSelectionChanged() {},
  },
  created() {
    let parent = this.$parent;
    while (parent && !this.tree) {
      if (parent.isTree) {
        this.tree = this.$parent;
      } else {
        parent = parent.$parent;
      }
    }
  },
  computed: {},
};
</script>
<style></style>
